---
title: Mettre en forme le rendu Markdown avec la typographie Tailwind
description: Apprenez à utiliser @tailwind/typography pour mettre en forme votre rendu Markdown.
i18nReady: true
type: recipe
---
import { Steps } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Vous pouvez utiliser le module d'extension Typography de [Tailwind](https://tailwindcss.com) pour mettre en forme le rendu Markdown à partir de sources telles que les [**collections de contenu**](/fr/guides/content-collections/) d'Astro.

Cette recette vous apprendra à créer un composant Astro réutilisable pour mettre en forme votre contenu Markdown en utilisant les classes utilitaires de Tailwind.

## Prérequis

Un projet Astro qui :

	- a [le module d'extension Vite de Tailwind](/fr/guides/styling/#tailwind) installé
	- utilise les [collections de contenu](/fr/guides/content-collections/) d'Astro.

## Mise en place de `@tailwindcss/typography`

Tout d'abord, installez `@tailwindcss/typography` en utilisant votre gestionnaire de paquets préféré.

<PackageManagerTabs>
 	<Fragment slot="npm">
	```shell 
	npm install -D @tailwindcss/typography
	```
	</Fragment>
  	<Fragment slot="pnpm">
	```shell 
	pnpm add -D @tailwindcss/typography
	```
	</Fragment>
  	<Fragment slot="yarn">
	```shell
	yarn add --dev @tailwindcss/typography
	```
	</Fragment>
</PackageManagerTabs>

Ensuite, ajoutez le paquet en tant que module d'extension dans votre fichier de configuration Tailwind.

```css title="src/styles/global.css" ins={2}
@import 'tailwindcss';
@plugin '@tailwindcss/typography';
```

## Recette

<Steps>
1. Créez un composant `<Prose />` pour fournir un élément `<div>` avec une balise `<slot />` pour votre Markdown rendu. Ajoutez la classe de style `prose` ainsi que les [modificateurs d'éléments Tailwind](https://tailwindcss.com/docs/typography-plugin#element-modifiers) dans l'élément parent.

    ```astro title="src/components/Prose.astro"
    ---
    ---
    <div 
      class="prose dark:prose-invert 
      prose-h1:font-bold prose-h1:text-xl 
      prose-a:text-blue-600 prose-p:text-justify prose-img:rounded-xl 
      prose-headings:underline">
      <slot />
    </div>
    ```
    :::tip
    Le module d'extension `@tailwindcss/typography` utilise des [**modificateurs d'éléments**](https://tailwindcss.com/docs/typography-plugin#element-modifiers) pour mettre en forme les composants enfants d'un conteneur avec la classe `prose`. 

    Ces modificateurs suivent la syntaxe générale suivante :

      ```
      prose-[element]:class-to-apply
      ``` 

    Par exemple, `prose-h1:font-bold` donne à toutes les balises `<h1>` la classe Tailwind `font-bold`.
    :::

2. Interrogez votre entrée de collection sur la page où vous voulez afficher votre Markdown. Passez le composant `<Content />` de `await render(entry)` à `<Prose />` en tant qu'enfant pour envelopper votre contenu Markdown dans les styles Tailwind.

    ```astro title="src/pages/index.astro"
    ---
    import Prose from '../components/Prose.astro';
    import Layout from '../layouts/Layout.astro';
    import { getEntry, render } from 'astro:content';

    const entry = await getEntry('collection', 'entry');
    const { Content } = await render(entry);
    ---
    <Layout>
      <Prose>
        <Content />
      </Prose>
    </Layout>
    ```
</Steps>

## Ressources

- [Documentation de Tailwind Typography](https://tailwindcss.com/docs/typography-plugin)
